import React from 'react';
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';
import { isIos } from '@/constants';
//import { TouchableOpacity } from 'react-native-gesture-handler';

const theme = {
  radius_sm: 3,
  border_width_sm: 0.5,
  v_spacing_sm: 6,
  h_spacing_lg: 15,
  button_font_size_sm: 12,
  brand_primary: '#108ee9',
  color_link: '#108ee9',
  color_text_placeholder: '#bbbbbb',
  color_text_base_inverse: '#ffffff',
  fill_base: '#ffffff',
};
const styles = StyleSheet.create({
  tag: {
    borderRadius: theme.radius_sm,
    backgroundColor: 'transparent',
    flexDirection: 'row',
    overflow: 'visible',
  },
  wrap: {
    borderRadius: theme.radius_sm,
    borderWidth: theme.border_width_sm,
    borderStyle: 'solid',
    paddingHorizontal: theme.h_spacing_lg,
  },
  activeText: {
    color: theme.color_link,
    fontSize: theme.button_font_size_sm,
    textAlign: 'center',
  },
  activeWrap: {
    backgroundColor: theme.fill_base,
    borderColor: theme.brand_primary,
  },
  closeIOS: {
    borderRadius: 8,
    width: 16,
    height: 16,
    left: -2,
    top: -4,
    overflow: 'hidden',
  },
  closeAndroid: {
    borderRadius: 8,
    width: 16,
    height: 16,
    left: -5,
    top: -4,
  },
  closeWrap: {
    width: 16,
    height: 16,
    borderRadius: 8,
    position: 'absolute',
    zIndex: 2,
    elevation: 2,
    left: -2,
    top: -2,
    //justifyContent: 'center',
    //alignItems: 'center',
    //overflow: 'hidden',
  },
  closeText: {
    //position: 'absolute',
    borderRadius: 8,
    backgroundColor: theme.color_text_placeholder,
    color: theme.color_text_base_inverse,
    textAlign: 'center',
    fontSize: 20,
    lineHeight: 18,
  },
});
export default function ClosableTag({
  children,
  onPress,
  onClose,
  showClose = true,
  userStyle = {},
}) {
  return (
    <View style={[styles.tag, userStyle.tag]}>
      {showClose && (
        <TouchableOpacity
          onPress={onClose}
          style={styles.closeWrap}
          activeOpacity={0.4}
        >
          <Text style={[styles.closeText, isIos ? styles.closeIOS : undefined]}>
            ×
          </Text>
        </TouchableOpacity>
      )}
      <View style={[styles.wrap, styles.activeWrap]}>
        <TouchableOpacity onPress={onPress || onClose} activeOpacity={0.6}>
          {typeof children === 'string' ? (
            <Text style={[styles.activeText]}>{children}</Text>
          ) : (
            children
          )}
        </TouchableOpacity>
      </View>
    </View>
  );
}
